<template>
  <div style="height: 100%">
    <div
      v-for="(item, index) in data"
      :key="index"
      :class="item == selected ? 'ds-box-selected' : ''"
    >
      <div class="ds-box2 ds-box-hover" @click="functionOpen(item)">
        <div style="width: 5%"></div>
        <div class="ds-grow">
          <span class="data-name">{{ item }}</span>
        </div>
      </div>
      <div class="ds-hr2"></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      data: ["卫星航拍图", "交通路线图"],
      selected: "卫星航拍图",
    };
  },
  watch: {},
  mounted() {
    if (this.selected) {
      this.$emit("select", this.selected);
    }
  },
  methods: {
    functionOpen(item) {
      //传递参数
      if (item == this.selected) return;

      this.selected = item;
      this.$emit("select", this.selected);
      return item;
    },
  },
};
</script>
<style scoped></style>
